<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		
		<style type="text/css">
			div#windowArea{width:800px;height:600px;border:1px solid black;overflow:hidden;position:absolute;left:30px;top:30px;}
			div.container{width:300px;height:300px;background:gray;/*position:absolute;left:0px;top:0px;*/}

			div.window{width:100%;height:100%;background:green;}
			div.head{height:10%;background:blue;}
			div.body{height:80%;background:red;}
		</style>

	</head>
	<body>
		<div id="windowArea">
			<div id="container1" class="container"></div>
			<div id="container2" class="container"></div>
			<div id="container3" class="container"></div>
			<div id="container4" class="container"></div>
			<div id="container5" class="container"></div>
			<div id="container6" class="container"></div>
		</div>
	</body>
	<script type="text/javascript">
	
		//maybe should use pure javascript for performance.
		
		var mainHTML=
					'<div class="window">'+
						'<div class="head"></div>'+
						'<div class="body"></div>'+
						'<button>asdf</button>'+
					'</div>';
							
		function Window($container,$windowArea){
			this.$container=$container;
			this.$windowArea=$windowArea;

//			var x=this.$container.position();//get: relative to the parent element.
//			alert(x.left+" "+x.top);
//			var x=this.$container.offsetParent();//get: relative to the closest ancestor (parent) element with a specified position
//			alert(x.left+" "+x.top);
//			var x=this.$container.offset();//get/set: relative to the document
//			alert(x.left+" "+x.top);
			this.createDOM();
		}
		
		Window.count=0;
		
		Window.prototype={
			createDOM:function(){
				var self=this;
				Window.count++;
				
				var $window=$(mainHTML);
				var $head=$window.find(".head");
			
				$head.bind("mousedown",function(e){self.winMousedown(e);});
				$head.bind("mouseup",function(){self.winMouseup();});
				
				//??? always bind mousemove, or bind dynamic;
//				$head.bind("mousemove",function(e){self.winMousemove($(this),e);});
				
				$window.find(".body").text("I'm body "+Window.count);				
				
				$window.appendTo(this.$container);
				
				this.$container.css({"position":"relative","zIndex":Window.count});
				this.originZIndex=Window.count;
				this.$container.attr("tabindex",-1);

				this.$container.bind("focus",function(){self.winFocus();});
				this.$container.bind("blur",function(){self.winBlur();});						
				
//				this.$windowArea.bind("scroll",function(){self.winAreaScroll();});		
			},
			
			winMousedown:function(e){
				var self=this;
				$head=$(e.target);
/*				//v1
				this.oldMouseOffset={left:e.pageX,top:e.pageY};
				this.oldWindowOffset=this.$container.offset();
*/

/*				//v2
				this.originMouse={left:e.pageX,top:e.pageY};
				this.originWindow=this.$container.offset();
*/
				
				//v2.1
				var originWindow=this.$container.offset();
				this.originDiff={					
					left:originWindow.left-e.pageX,
					top:originWindow.top-e.pageY
				};
				
				this.$windowArea.bind("mousemove",this,this.winMousemove);

				$head.text("start");

			},
			
			winMouseup:function(){

				this.$windowArea.unbind("mousemove",this.winMousemove);

			},
			
			winMousemove:function(e){
				//Code here
					self=e.data;
/*				//v1		
				var newOffset={
					left:e.pageX-this.oldMouseOffset.left+this.oldWindowOffset.left,
					top:e.pageY-this.oldMouseOffset.top+this.oldWindowOffset.top
					};
					
				this.$container.offset(newOffset);
				
				this.oldMouseOffset={left:e.pageX,top:e.pageY};
				this.oldWindowOffset=newOffset;
*/
				
/*				//v2
				var newOffset={
					left:e.pageX-this.originMouse.left+this.originWindow.left,
					top:e.pageY-this.originMouse.top+this.originWindow.top
				};
				this.$container.offset(newOffset);
*/
				//v2.1
				var newOffset={
					left:e.pageX+self.originDiff.left,
					top:e.pageY+self.originDiff.top
				};
				self.$container.offset(newOffset);
								
			},
			
			winFocus:function(){
				this.$container.css("zIndex",9999);
			},
		
			winBlur:function(){			
				this.$container.css("zIndex",this.originZIndex);
			}
			
		}
		

		
		$(document).ready(function(){
			
			var window1=new Window($("#container1"),$("#windowArea"));
			var window2=new Window($("#container2"),$("#windowArea"));
			var window3=new Window($("#container3"),$("#windowArea"));
			var window4=new Window($("#container4"),$("#windowArea"));
			var window5=new Window($("#container5"),$("#windowArea"));
			var window6=new Window($("#container6"),$("#windowArea"));
		
		});
		
		
		</script>
</html>